<!--
 * @Author: your name
 * @Date: 2021-08-25 17:46:12
 * @LastEditTime: 2021-11-01 09:37:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \uniapp-cil\src\pages\index\index.vue
-->
<template>
    <view>
        <!-- 头部 -->
        <view class="header bg_w" :class="{float_header:scroll_height > store_top}">
            <view class="search  p_col_30 p_row_30 u-flex">
                <view class="search_box br_30 u-flex p_row_30 u-flex-1" @click="$x.to('clazz/search')">
                    <view class="search_icon ">
                        <u-icon name="search" color="#999999" size="28"></u-icon>
                    </view>
                    <view class="search_text  f_w_500  u-flex-1 color_9 u-font-26 u-m-l-10">
                        请输入关键字搜索
                    </view>
                    <view class="search_right u-flex">
                        <view class="" @click.stop="openCamera">
                            <u-icon name="camera" color="#999999" size="32"></u-icon>
                        </view>
                        <view class="" @click.stop="scanHandle">
                            <u-icon class="u-m-l-20" name="scan" color="#999999" size="32"></u-icon>
                        </view>
                    </view>
                </view>
                <view class="u-m-l-20 u-rela">
                    <u-badge size="mini" :count="1" :is-center="true"></u-badge>
                    <u-icon name="chat" color="#999" size="40"></u-icon>
                </view>
            </view>
        </view>
        <!-- 轮播 -->
        <view class="swiper_box p_row_30 bg_w">
            <u-swiper :list="swiper_list" img-mode='aspectFit' height="280" border-radius="20" bg-color="#fff">
            </u-swiper>
        </view>
        <!-- 导航栏 -->
        <view class="nav u-flex u-flex-wrap u-m-t-30" @click="$x.to('index/center')">
            <view class="nav_item w_20 u-flex u-flex-col m_b_20" v-for="(item,index) in nav_list" :key="index" @click="$x.to(item.url)">
                <view class="">
                    <u-image width="80" :src="item.img_url" mode="widthFix"></u-image>
                </view>
                <view class="u-font-26 color_6">
                    {{item.title}}
                </view>
            </view>
        </view>
        <!-- 专区 -->
        <view class="special_area p_row_30 u-flex u-row-between u-m-t-10 f_s_50 color_w f_w_700">
            <view class="collage w_48 h_100 br_30 u-flex u-row-center">
                <view class="">
                    拼团专区
                </view>

            </view>
            <view class="integral w_48 h_100 br_30 u-flex u-row-center">
                <view class="">
                    积分兑换
                </view>

            </view>
        </view>
        <!-- 秒杀 -->
        <view class="seckill u-m-t-30 p_row_20 bg_w br_30 m_row_30 p_b_20">
            <view class="head u-flex u-row-between p_col_20">
                <view class="u-font-28 zhu_color f_w_600">
                    <text>商城秒杀</text>
                </view>
                <view class="color_9 u-font-26">
                    <text>更多秒杀</text>
                    <u-icon name="arrow-right" color="#999" size="28"></u-icon>
                </view>
            </view>
            <view class="body">
                <x-scroll-row>
                    <template>
                        <view class="u-text-center  u-m-r-20" v-for="(item,index) in goods_list" :key="index">
                            <view class=" o_hidden">
                                <u-image width="110" height="110" :src="item.img_url" mode="aspectFill"></u-image>
                            </view>
                            <view class="err_color u-font-24 f_w_600 u-m-t-5">
                                <text>￥&nbsp;</text>
                                <text class="u-font-28">{{item.shop_price}}</text>
                            </view>
                        </view>
                    </template>
                </x-scroll-row>
            </view>
        </view>
        <!-- 精选店铺 -->
        <view class="store m_row_30 u-m-t-30 ">
            <view class="head ">
                <u-section title="精选店铺" sub-title="查看更多店铺"></u-section>
            </view>
            <view class="store_list u-m-t-20">
                <view class="store_item m_b_20 bg_w br_20 p_row_20 p_col_30" v-for="(item,index) in store_list"
                    :key="index">
                    <view class="store_info u-flex">
                        <view class="store_logo ">
                            <u-image border-radius="20" width="108" height="108" :src="item.store_logo"
                                mode="aspectFit"></u-image>
                        </view>
                        <view class="u-flex-1 u-m-l-20">
                            <view class="u-flex u-row-between u-font-28 zhu_color">
                                <text selectable>{{item.store_name}}</text>
                                <u-tag text="进店" mode="dark" />
                            </view>
                            <view class="u-m-t-10">
                                <u-rate :active-color="vuex_color.primary" :inactive-color="vuex_color.primaryDisabled"
                                    :count="5" :disabled="true" v-model="item.score"></u-rate>
                            </view>
                        </view>
                    </view>
                    <view class="store_goods u-m-t-20">
                        <x-scroll-row>
                            <template>
                                <view class="u-text-center goods_item  u-m-r-20" v-for="(el,idx) in item.goods" :key="idx">
                                    <view class="o_hidden">
                                        <u-image border-radius="10" width="100%" height="160" :src="el.img_url" mode="aspectFill">
                                        </u-image>
                                    </view>
                                    <view class="u-font-26 w_100 ci_color u-line-1 u-m-t-5">
                                        <text selectable>{{el.goods_name}}</text>
                                    </view>
                                    <view class="err_color u-font-24 f_w_600 u-m-t-5">
                                        <text>￥&nbsp;</text>
                                        <text class="u-font-28">{{el.shop_price}}</text>
                                    </view>
                                </view>
                            </template>
                        </x-scroll-row>
                    </view>
                </view>
            </view>
        </view>
        <!-- 推荐商品 -->
        <view class="recommend u-m-t-30 p_row_30">
            <view class="recommend_head">
                <u-divider :color="vuex_color.primary" bg-color="transparent" half-width="100">猜你喜欢</u-divider>
            </view>
            <view class="goods u-flex u-row-between u-flex-wrap u-m-t-30">
                <view class="goods_item bg_w w_49 br_30 m_b_20 o_hidden" v-for="(item,index) in goods_list"
                    :key="index">
                    <view class="goods_img">
                        <u-image width="100%" height="340" :src="item.img_url" mode="aspectFill"></u-image>
                    </view>
                    <view class="p_row_20 p_b_20">
                        <view class="goods_name u-m-t-10 u-line-2 zhu_color u-font-28">
                            <u-tag text="推荐" size="mini" type="error" mode="dark" class="u-m-r-5" />
                            <text selectable>{{item.goods_name}}</text>
                        </view>
                        <view class="u-flex u-row-between">
                            <view class="err_color u-font-24 f_w_600">
                                <text>￥&nbsp;</text>
                                <text class="u-font-28">{{item.shop_price}}</text>
                            </view>
                            <view class="color_9 text_del u-font-24">
                                <text>￥</text>
                                <text>{{item.vip_price}}</text>
                            </view>
                        </view>
                        <view class="u-m-t-5 u-flex u-row-between">
                            <u-tag text="4人正在拼团" size="mini" type="error" mode="plain" />
                            <text class="u-font-24 color_9">销量:54</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 返回顶部top -->
        <view class="back_top po_fixed br_round bg_w u-flex u-row-center" v-if="scroll_height > store_top" @click="backTop">
            <u-icon custom-prefix="custom-icon" name="fanhuidingbu3" :color="vuex_color.primary" size="64"></u-icon>
        </view>
        <view class="" v-if="camera">
            <camera device-position="front"></camera>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                store_top:0,
                scroll_height:0,
                camera: false,
                nav_list: [{
                        img_url: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg.dpg",
                        title: "数码电器"
                    },
                    {
                        img_url: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
                        title: "超市"
                    },
                    {
                        img_url: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg.dpg",
                        title: "服饰"
                    },
                    {
                        img_url: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/199384/36/8824/6465/61459a65E7b16893c/7becc937fbade5b3.png!q70.jpg.dpg",
                        title: "9.9元拼"
                    },
                    {
                        img_url: "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/192665/22/12752/7912/60ec15cbE261a32bf/3ace51badf80e71b.png!q70.jpg.dpg",
                        title: "更多",
                        url:"index/clazz"
                    },
                ],
                swiper_list: [{
                        image: 'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/201780/38/13264/79441/617f9726Ed6fcdc94/aeb483dafc71ad90.jpg!cr_1053x420_4_0!q70.jpg.dpg',
                    },
                    {
                        image: 'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/140891/26/26766/110497/617e7abcE32f9b445/c62ae678459e9ac7.jpg!cr_1053x420_4_0!q70.jpg.dpg',
                    },
                    {
                        image: 'https://imgcps.jd.com/ling4/10039192174140/5ri45oiP5pys5pKp5Yqo5L2g5b-D/55SE6YCJ5ZOB6LSo/p-5c134fc882acdd181dcabc0d/4a9d8c0f/cr_1125x449_0_166/s/q70.jpg',
                    }
                ],

                store_list: [{
                        store_logo: "https://img13.360buyimg.com/cms/jfs/t16876/61/2402588743/38488/9cfc12f3/5af59889N20520f26.jpg",
                        store_name: "可达鸭的小店",
                        score: 3.3,
                        goods: [{
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                            {
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                            {
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                        ]
                    },
                    {
                        store_logo: "https://img13.360buyimg.com/cms/jfs/t16876/61/2402588743/38488/9cfc12f3/5af59889N20520f26.jpg",
                        store_name: "可达鸭的小店",
                        score: 3.3,
                        goods: [{
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                            {
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                            {
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                        ]
                    },
                    {
                        store_logo: "https://img13.360buyimg.com/cms/jfs/t16876/61/2402588743/38488/9cfc12f3/5af59889N20520f26.jpg",
                        store_name: "可达鸭的小店",
                        score: 3.3,
                        goods: [{
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                            {
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                            {
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                        ]
                    },
                    {
                        store_logo: "https://img13.360buyimg.com/cms/jfs/t16876/61/2402588743/38488/9cfc12f3/5af59889N20520f26.jpg",
                        store_name: "可达鸭的小店",
                        score: 3.3,
                        goods: [{
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                            {
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                            {
                                img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                                goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                                shop_price: '60.00',
                                vip_price: "54.00",
                            },
                        ]
                    },

                ],
                goods_list: [{
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                ],
            };
        },
        onLoad() {
        },
        onPageScroll(e) {
            this.scroll_height = e.scrollTop
        },
        onReady() {
            this.getStoreTop()
        },

        methods: {
            backTop(){
                uni.pageScrollTo({
                    scrollTop:0
                })
            },
            getStoreTop(){
                this.$u.getRect('.store').then(res=>{
                    this.store_top = res.top
                })
            },
            scanHandle() {
                uni.scanCode({
                    success: (res) => {
                        console.log(res);
                    }
                })
            },
            openCamera() {
                // this.camera=true
                this.$x.openAuthorize('camera')
            },
        },
    };
</script>



<style lang="scss" scope>
    .back_top{
        bottom: 150rpx;
        right:30rpx;
        width: 72rpx;
        height: 72rpx;
    }
    
    .header {
        .search {
            &_box {
                height: 60rpx;
                background-color: #f6f6f6;
            }
        }
    }
    
    .header.float_header{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
    }

    .special_area {
        height: 200rpx;

        .collage {
            background: linear-gradient(-45deg, #EA384D, #D31027);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }

        .integral {

            background: linear-gradient(to right, #fc67fa, #f4c4f3);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }
    }

    .store{
        &_item{
            box-shadow: 0 0 10rpx #eee;
        }
        &_goods{
            .goods_item{
                width: 200rpx;
            }
        }
    }
    .recommend {
        .goods {
            &_item {
                height: 530rpx;
                box-shadow: 0 0 10rpx #eee;
            }
        }
    }
</style>
